import PropTypes from "prop-types";
import React from 'react';

const FunCpnt1 = function FunCpnt1 (props) {
    let { title, children } = props
    // console.log(props)//props是父组件传递进来的信息
    //传递进来的属性只读,不能进行修改
    //原理:props对象被冻结了
    //传递进来的children插槽信息,并不是传递的标签,而是处理过后的virtualDOM,

    children = React.Children.toArray(children) || [];
    let headerSlot = [],
        footerSlot = [],
        defaultSlot = [];
    children.forEach(child => {
        console.log(child)
        let { slot } = child.props;
        if (slot === 'header') {
            headerSlot.push(child);
        } else if (slot === 'footer') {
            footerSlot.push(child);
        } else {
            defaultSlot.push(child);
        }
    })

    return <div>
        {headerSlot}
        <br />
        <br />
        {title}
        <br />
        {defaultSlot}
        <br />
        <br />
        {footerSlot}
    </div>

}
// 通过[把函数当做对象],设置静态的私有属性方法,来给其设置属性的规则
FunCpnt1.defaultProps = {//设置默认值
    title: '这里是函数组件FunCpnt1的默认title,父组件没有传值时的默认值,有点像vue中data的默认值声明'
};
//设置其他规则,例如:规定传递进来的数据格式,是否必传,[依赖插件] prop-types
FunCpnt1.propTypes = {
    title: PropTypes.string.isRequired //字符串类型,必传
}
//鸡肋,控制台报错,不影响值的获取

export default FunCpnt1;